﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>裁剪图片</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="title" class="mui-title">图片裁剪</h1>
			<button id="btngo" class="mui-btn mui-btn-success mui-pull-right">完成</button>
		</header>
		<div class="mui-content">
			<img id="imgid" src="" width="100%">
			<div id="clip" style="width: 200px; height: 200px; border: 1px #fff solid; position: absolute; top:70px; left: 70px; z-index: 100;"></div>

		</div>

		<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init({});
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				var imagerbg=self.img;
//				 var _img = new Image();
//				_img.id="imgid";
//				_img.src=imagerbg;
//				_img.style.width="100%";
				$("#imgid").src=imagerbg;
//				$("#imgid").style.width="100%";
//				var _div = document.getElementsByClassName("mui-content")[0];
//				_div.appendChild(_img);
			
				var url = location.href;
				url = url.substr(url.indexOf('=') + 1);
				$("#imgid").attr("src", imagerbg).load(function() {
					Clip.touchX = $("#imgid").width(); //当前的手指所处的X坐标
					Clip.touchY = $("#imgid").height(); //当前手指的Y坐标		         
				});
				alert("当前坐标：x:"+Clip.touchX+"y:"+Clip.touchY);
			});

			$("#btngo").click(function() {
				//获取width和height的百分比
				var widthPix = (Clip.size / $('#imgid').width()).toFixed(2) * 100;
				var heightPix = (Clip.size / $('#imgid').height()).toFixed(2) * 100;
				//获取左上角位置百分比
				var topPix = ((Clip.topCss - 50) / $('#imgid').height()).toFixed(2) * 100;
				var leftPix = (Clip.leftCss / $('#imgid').width()).toFixed(2) * 100;
				//对图片进行裁剪
				alert(2);
				alert($('#imgid').attr('src'));
				plus.zip.compressImage({
						src: $('#imgid').attr('src'), //search.src, //src在这里是第一步Url里的src。也就是本地路径
						dst: '_doc/a.jpg',
						overwrite: true,
						clip: {
							top: topPix + '%',
							left: leftPix + '%',
							width: widthPix + '%',
							height: heightPix + '%'
						}
					},
					function(e) {
						//$('#tmpa').attr('src',e.target)
						// resizeImage(e.target); //压缩图片
						var fat = plus.webview.getWebviewById('userinfo');
						var evjs = "compressImage('" + e.target + "');";
						fat.evalJS(evjs);
						mui.back();
					}
				);
		});
			var Clip = {
				size: 200, //这个表示正方形目前的边长，乘上一个基数就是当前的像素值
				range: {}, //用来控制正方形left和top的极限值，以免移出边界
				topCss: 60, //表示当前的top值
				leftCss: 60, //表示当前的left值
				touchX: 500, //当前的手指所处的X坐标
				touchY: 1000, //当前手指的Y坐标
				timer: null
			}
			var clip = document.getElementById('clip');
			//开始接触的时候，记录当前的手指位置
			clip.addEventListener('touchstart', function(event) {

				event.preventDefault();
			});
			//移动后，记录新的位置，设置新的top和left值
			clip.addEventListener('touchmove', function(event) {
				//设置20ms的事件
				if(Clip.timer != null) { //函数节流
					return;
				}
				Clip.timer = setTimeout(function() {
					var x = event.touches ? event.touches[0].clientX : event.screenX;
					var y = event.touches ? event.touches[0].clientY : event.screenY;

					nowLeft = x - 100;
					nowTop = y - 100;
					if(nowLeft < 10)
						nowLeft = 0;
					if(nowTop < 50)
						nowTop = 50;
					if((nowLeft + 200) > Clip.touchX)
						nowLeft = Clip.touchX - 200;
					if(nowTop + 200 > Clip.touchY)
						nowTop = Clip.touchY - 160;

					//$('#clip').html(x+","+y+"<br/>s:"+nowLeft+","+nowTop+"<br/>"+ Clip.touchX +","+ Clip.touchY)

					$('#clip').css({
						left: nowLeft + 'px',
						top: nowTop + 'px'
					});
					Clip.leftCss = nowLeft;
					Clip.topCss = nowLeft;

					Clip.timer = null;
				}, 20);
alert("移动后：x:"+Clip.touchX+"y:"+Clip.touchY);
			});
		</script>
	</body>

</html>